<script setup lang="ts">
import ByIcon from "@/components/ui/ByIcon.vue";
import BySquare from "@/components/ui/BySquare.vue";
import ViewList from "@/components/common/ViewList.vue";

import ApiTicket from "@/api/ticket";
import useList from "@/hooks/useList";

defineEmits<{
  close: [];
}>();

const { sn, couponId, isVerified } = defineProps<{
  sn: string;
  couponId: number;
  isVerified?: boolean;
}>();

const { loading, list, nextPage } = useList<{
  id: string;
  is_verified: boolean;
  merchant_logo: string;
  merchant_title: string;
}>(ApiTicket.getTicketVerifyMerchants, {
  search: { sn, coupon_id: couponId },
});
</script>

<template>
  <view :class="isVerified ? 'mt-3 bg-primary rounded-lg' : 'bg-white'">
    <view v-if="!isVerified" class="bg-primary py-4 text-center text-dark"
      >可打卡商家</view
    >

    <view class="relative border-b-1 border-[#f5f5f5]">
      <scroll-view
        :scroll-y="true"
        :class="isVerified ? '' : 'h-[60vh]'"
        @scrolltolower="nextPage"
      >
        <ViewList :loading="loading" :is-empty="list.length == 0">
          <view class="flex flex-wrap p-3">
            <view
              v-for="item in list"
              :key="item.id"
              class="relative w-[126px] m-3 text-center"
            >
              <view class="w-[126px] h-[126px] rounded-full bg-primary">
                <image
                  class="w-full h-full rounded-lg"
                  :src="item.merchant_logo"
                />
              </view>

              <view class="text-sm text-dark">{{ item.merchant_title }}</view>

              <BySquare
                v-if="item.is_verified"
                class="absolute top-0 right-0 py-0.5 px-1 -translate-y-1/3 translate-x-1/3 bg-error text-xs text-white"
                >已核销
              </BySquare>
            </view>
          </view>
        </ViewList>
      </scroll-view>
    </view>

    <view
      v-if="!isVerified"
      class="bg-white text-center text-dark py-6"
      @tap="$emit('close')"
    >
      <view>收起</view>
      <ByIcon name="ArrowBottom" />
    </view>
  </view>
</template>
